/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */


@import "compass";

@-webkit-keyframes tapAnimation{
  0%   { opacity: 0; }
  50% { opacity: 1;  }
  100% { opacity: 0; -webkit-transform:scale(2);}
}
* {
  @include box-sizing(border-box);
}

/* colors */
/* ========================================= */

$darkGrey : #212221;
$adWordsBlue: #4285f4;
$adWordsGreen: #38ad5c;
$adWordsYellow: #f4b400;
$adWordsRed: #ea3131;

/* fonts */
/* ========================================= */

.roboto, body{
	font-family: 'Roboto', sans-serif;
}
body{
	overflow-x:hidden;
}
.roboto-condensed{
	font-family: 'Roboto Condensed', sans-serif;
}

.roboto-slab{
	font-family: 'Roboto Slab', serif;
}

@font-face{
font-family:Batch;
src:url('fonts/batch.eot');
src:url('fonts/batch.eot?#iefix') format('embedded-opentype'),
  url('fonts/batch.woff') format('woff'),
  url('fonts/batch.ttf') format('truetype'),
  url('fonts/batch.svg#batchregular') format('svg');
font-weight:normal;
font-style:normal;
}

.batch {
	font-family:"Batch"!important; 
	font-size:16px;
	line-height:1;
	display:inline-block;
	font-weight:100!important;
}

/* type */
/* ========================================= */

h1{
	
	font-family: 'Open Sans', sans-serif;
	color:#111;
	font-weight: 300;

}

h2{
	
	font-family: 'Open Sans', sans-serif;
	color:#333;
	font-weight:100;
}

h3{
	font-family: 'Open Sans', sans-serif;
	color:#777;
}

h5{
	
	color:#686868;
	font-weight:400;
}

p.lead{
	color:#838383;
	font-family: 'Roboto Slab', serif;
	font-weight:200;
}

a{
	color:#fff;
	text-decoration:none;
}

strong{
	font-weight:bold;
}
p{
	font-family: 'Open Sans', sans-serif;
	font-weight:200;
	color:#666;

	&.highlight{
		color:#ef7777;
	}
}

img.vertical-margin{
	margin:3rem 0;
}
.budget{
	margin-left:15px!important;
	color:#eee;
}

/* don't over think it grids */
/* ========================================= */
$pad: 40px;

.grid {
  margin: 0 0 $pad 0;
  
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}



/* common */
/* ========================================= */
.wrapper{
	width:900px;
	margin:0 auto;
}

.team{
	margin-top:1rem;
}
.person{
	@include inline-block;
	text-align:left;
	margin-right:30px;

	div.thumb{
		width:60px;
		height:60px;
		@include border-radius(30px);
		background-repeat:no-repeat;
		background-position:50% 50%;
		@include inline-block;
		margin:0 10px 0 0;
		background-size:100% auto!important;
		@include box-shadow(0px 1px 3px rgba(0,0,0,0.5));
	}
	.text{
		@include inline-block;
	}
	strong{
		display:block;
		font-size:1.4rem;
		color:#444;
		font-family: 'Roboto Slab', serif;
		font-weight:300;
		margin-bottom:0.3rem;
	}
	span{
		display:block;
		font-size:1.3rem;
		color:#888;
		@include opacity(0.5);
		font-weight:300;
	}

}
/* ads board */
/* ========================================= */
.ads-board{
	position: relative;
	min-height:600px;
	.show-ad{
		
		@include inline-block;
		padding:20px;
		text-shadow:none;
		position:relative;
		z-index:1;
		color:#fff!important;
		font-size:1rem;
	}

	>div{
		background:#ddd;
		&.highlight{
			 color:#fff!important;
			 background:#ef7777;
		}
	}

	.ad300x250{
		position: absolute;
		top:0;
		left:0;
		width:300px;
		height:250px;
	}
	.ad336x280{
		position: absolute;
		top:0;
		left:365px;
		width:336px;
		height:280px;
	}
	.ad160x600{
		position: absolute;
		top:0;
		left:765px;
		width:160px;
		height:600px;
	}
	.ad120x600{
		position: absolute;
		top:0;
		left:985px;
		width:120px;
		height:600px;
	}
	.ad120x600{
		position: absolute;
		top:0;
		left:985px;
		width:120px;
		height:600px;
	}
	.ad468x60{
		position: absolute;
		top:400px;
		left:0;
		width:468px;
		height:60px;
	}
	.ad728x90{
		position: absolute;
		top:510px;
		left:0;
		width:728px;
		height:90px;
	}
	.ad320x50{
		position: absolute;
		top:300px;
		left:0;
		width:320px;
		height:50px;
	}
	iframe{
		display:none;
	}
	iframe.shown{
		position:absolute;
		top:0;
		left:0;
		z-index:3;
		width:100%;
		height:100%;
		display:block;
	}
}
.ad-sizes .ads-board > div { padding:20px; font-size:1em; color:#aaa;}
/* sections */
/* ========================================= */
.cover-page{
	background:#4285f5;
	h1,h2,h3{color:#fff}
	img{float:left;}
	h1{float:left;  margin-left:200px; margin-top:20px}
	h1 span{display:block; font-size:2.5rem; font-weight:normal; margin-top:1rem; color:rgba(255,255,255,0.6)}
	p{color:#fff}
	.person strong{color:#fff}
}

/* flowtime overrides and extensions */
/* ========================================= */
.ft-page{
	padding:2rem 5rem;
}
.pull-left{
	float:left;
}

#abgl,#abgc{display:none!important}

section.ads{
	padding:20px 150px;
	margin:0 -150px;
	background:image-url('whitey.png');
}

.dark{
	background:#2f2f2f;
	p{color:#b0b0b0}
	h1,h2{color:#ccccc7}
	h3{color:#aaa; margin-left:15px;}
	li{color:#b0b0b0}
}
.number{
	@include inline-block;
	background:$adWordsBlue;
	height:40px;
	width:40px;
	line-height:40px;
	text-align:center;
	@include border-radius(20px);
	margin-right:10px;
	color:#fff;
	font-size:1.3rem;
	position: absolute;
	top:0;
	left:0;
}
p.lead{
	position: relative;
}
.stack-center img{
	display:inline;
}
p.lead strong{
	font-weight:200!important;
	padding-left:50px;
	display:block;
}
.location{
	display:block;
	background:image-url('icon-location.png') 4px 50% no-repeat;
	background-size:10px auto;
	font-size:1.2rem;
	margin-top:10px;
	padding-left:20px;
}
.test{
	width:40%;
	float:left;
	overflow:hidden;
	margin-right:50px;
	position:relative;
	margin-top:50px;
	img{
		position:absolute;
		top:0;left:0;
	}
	.rest{
		float:left;
		margin-left:160px;
	}
}

.flowtime ul li:before, .flowtime dl dt:before {
content: "\2022";
text-align: right;
color: $adWordsBlue;
margin-right: 0.5rem;
display: inline-block;
position: absolute;
left: -1rem;
}


.flowtime li, .flowtime dd {
line-height: 2rem;
font-size:1.5rem;
margin-bottom: 1rem;
position: relative;
font-weight:100;
}
figure{
	margin-top:50px;
	margin-right:50px;

}
img.circ{
	width:150px;
	@include border-radius(75px);
	@include box-shadow(0px 2px 3px rgba(0,0,0,0.5));
	display:block;
	margin:0 0 50px 0;
}
p.lead{
	color:#999999;
	font-size:2rem;
	line-height:3.6rem;
	width:50%;
	font-family: 'Open Sans', sans-serif;
}

.tabs a{
	@include inline-block;
	margin:0 10px 10px 0;
	padding:10px 20px;
	&.selected{
		background:$adWordsBlue;
		color:#fff;
		@include border-radius(15px);
	}
}

.adwords-wrapper{
	width:1279px;
	@include inline-block;
	position:relative;
	overflow:hidden;
	@include border-radius(5px);
	@include box-shadow(0px 0px 30px rgba(0,0,0,0.4));
	>img{max-height:none}
}
.table-view{
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	height:100%;
	background-color:#f2f2f2;
}
.adwords-wrapper .shell{
	width:1280px;
	max-height:none;
	width:auto; max-width:none;
}

.total-spend{
	position:absolute;
	top:136px;
	left:16px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(0.4s);

	.bar{
		position:absolute;
		bottom:10px;
		left:7px;
		background:image-url('bar-pattern.png') 0 0 repeat-x;
		height:21px;
		@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
		width:0px;
		@include transition-delay(0.7s);
	}
}

.actual .total-spend{
	@include opacity(1);
	margin-top:0px;
	.bar{
		width:300px;
	}
}

.brand-engagement{
	position:absolute;
	top:258px;
	left:16px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(0.8s);

	.pie1{
		position:absolute;
		left:35px;
		top:115px;
		@include transform(rotate(55deg));
		@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
		@include transition-delay(1.2s);
		@include opacity(0);
	}
	.pie2{
		position:absolute;
		left:360px;
		top:115px;
		@include transform(rotate(15deg));
		@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
		@include transition-delay(1.5s);
		@include opacity(0);
	}
	.bar{
		width:60px;
		background:#e58720;
		position:absolute;
		bottom:36px;
		@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
		height:0;

		&.bar1{left:98px;@include transition-delay(1.5s);}
		&.bar2{left:160px;@include transition-delay(1.6s);}
		&.bar3{left:222px;@include transition-delay(1.7s);}
		&.bar4{left:284px;@include transition-delay(1.8s);}
		&.bar5{left:346px;@include transition-delay(1.9s);}
		&.bar6{left:408px;@include transition-delay(2s);}
		&.bar7{left:470px; background:#ccc;@include transition-delay(2.1s);}
	}
}

.actual .brand-engagement{
	@include opacity(1);
	margin-top:0px;
	.pie1, .pie2{
		@include transform(rotate(-55deg));
		@include opacity(1);
	}
	.bar1{height:28px}
	.bar2{height:88px}
	.bar3{height:48px}
	.bar4{height:28px}
	.bar5{height:18px}
	.bar6{height:14px}
	.bar7{height:59px}
}

.best-ads{
	position:absolute;
	top:830px;
	left:645px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(0.6s);
}

.actual .best-ads{
	@include opacity(1);
	margin-top:0px;
}


.negative-keywords{
	position:absolute;
	top:136px;
	left:645px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	display:none;
	@include transition-delay(0.2s);
}

.actual .negative-keywords{
	@include opacity(1);
	margin-top:0px;
}


.suggestions{
	position:absolute;
	top:610px;
	left:645px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(0.4s);
}

.actual .suggestions{
	@include opacity(1);
	margin-top:0px;
}
.clicks{
	position:absolute;
	top:136px;
	left:645px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(0.2s);
	.graph{
		position:absolute;
		top:130px;
		left:62px;
		@include transition(all 1.5s ease-in-out);
		@include transition-delay(0.5s);
		width:0;
		overflow:hidden;
		img{
			display:block;
			max-width:none;
		}
	}
}

.actual .clicks{
	@include opacity(1);
	margin-top:0px;
	.graph{
		width:100%;
	}
}


.placement-snapshots{
	position:absolute;
	top:690px;
	left:16px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(1s);
}

.actual .placement-snapshots{
	@include opacity(1);
	margin-top:0px;
}

.search{
	position:absolute;
	top:136px;
	left:16px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(0.3s);

	.graph{
		position:absolute;
		overflow:hidden;
		width:0;
		@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
		@include transition-delay(1s);
		top:120px;
		left:65px;
		img{
			width:auto;
			max-width:none;
			display:block;
		}
	}
}

.actual .search{
	@include opacity(1);
	margin-top:0px;
	.graph{
		width:100%;
	}
}

.video{
	position:absolute;
	top:136px;
	left:645px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(0.5s);

	.graph{
		position:absolute;
		overflow:hidden;
		width:0;
		@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
		@include transition-delay(1.4s);
		top:120px;
		left:65px;
		img{
			width:auto;
			max-width:none;
			display:block;
		}
	}
}

.actual .video{
	@include opacity(1);
	margin-top:0px;

	.graph{
		width:100%;
	}
}



.display{
	position:absolute;
	top:610px;
	left:645px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(1.1s);

	.graph{
		position:absolute;
		overflow:hidden;
		width:0;
		@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
		@include transition-delay(2s);
		top:120px;
		left:65px;
		img{
			width:auto;
			max-width:none;
			display:block;
		}
	}
}

.actual .display{
	@include opacity(1);
	margin-top:0px;

	.graph{
		width:100%;
	}
}

.engagement{
	position:absolute;
	top:610px;
	left:16px;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	z-index:2;
	@include opacity(0);
	margin-top:50px;
	@include transition-delay(0.8s);

	.graph{
		position:absolute;
		overflow:hidden;
		width:0;
		@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
		@include transition-delay(1.6s);
		top:120px;
		left:65px;
		img{
			width:auto;
			max-width:none;
			display:block;
		}
	}
}

.actual .engagement{
	@include opacity(1);
	margin-top:0px;
	.graph{
		width:100%;
	}
}

.campaign-graph{
	position:absolute;
	top:170px;
	left:300px;
	@include transition(all 1.5s ease-in-out);
	@include transition-delay(0.5s);
	width:0;
	overflow:hidden;
	img{
		display:block;
		max-width:none;
	}
}

.table-view .tap{
	
		display:block;
		width:40px;
		height:40px;
		background:rgba(255,0,0,0.6);
		@include border-radius(20px);
		position:absolute;
		top:60px;
		right:200px;
		z-index:10;
		opacity:0;
}
.revealed .campaign-graph{
	width:100%;
}
.revealed.adwords-wrapper.tap{
	-webkit-animation: tapAnimation 0.8s ease-in 1;
	-webkit-animation-delay:0s;
}

.imac{
	width:45rem;
	margin-left:-30%;
	bottom:20rem;
	position:absolute;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	@include opacity(0);
	@include transition-delay(0.4s);
}


.macbook{
	width:35rem;
	margin-left:-10%;
	position:absolute;
	bottom:20rem;@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	@include opacity(0);
	@include transition-delay(0.6s);
}

.ipad{
	width:17rem;
	margin-left:10%;
	position:absolute;
	bottom:20rem;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	@include opacity(0);
	@include transition-delay(0.8s);
	margin-top:0;
}

.android{
	width:6rem;
	margin-left:23%;
	position:absolute;
	bottom:18rem;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	@include opacity(0);
	@include transition-delay(1s);
	margin-top:0;
}

.actual{
	.imac,.macbook,.ipad,.android{@include opacity(1); bottom:16rem;}
	.macbook{bottom:15.5rem;}
	.ipad{bottom:15.2rem}
	.android{bottom:15rem;}
}

.mobile-a, .mobile-b{
	position:absolute;
	margin-left:-15rem;
	bottom:1rem;
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	@include transition-delay(0.8s);
	z-index:2;
	display:inline-block;
}
.mobile-shell{
	@include inline-block;
	position:relative;
	width:500px;
	>img{max-width:none; max-height:none;}
}
.mobile-shell .shell{
	
}
.mobile-content{
	position:absolute;
	top:265px;
	left:0px;
	overflow:hidden;
	height:463px;
	width:100%;
	img{
		max-width:100%;
	}
}

.mobile-b{z-index:3;@include opacity(0)}
.actual .mobile-a{
	
}
.mobile-box-1{
	
	.mobile-expand{
		height:0;
		@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
		@include transition-delay(2.5s);
		overflow:hidden;
		img{max-width:none; max-height:none}
	}
	.tap{
		display:block;
		width:40px;
		height:40px;
		background:rgba(255,0,0,0.6);
		@include border-radius(20px);
		position:absolute;
		top:260px;
		left:200px;
		z-index:10;
		opacity:0;
		
		
	}
}


.actual .tap{
	-webkit-animation: tapAnimation 0.8s ease-in 1;
	-webkit-animation-delay:2s;
}



.mobile-box-1, .mobile-box-2{
	@include transition(all 1s cubic-bezier(0.645, 0.045, 0.355, 1));
	@include transition-delay(0.6s);
	@include opacity(0);
	margin-top:-15px;
}
.mobile-box-2{
	@include transition-delay(0.8s);
}

.actual .mobile-box-1, .actual .mobile-box-2{
	@include opacity(1);
	margin-top:0;
}
.actual .mobile-box-1{
	.mobile-expand{
		height:140px;
	}
}

.adwords-wrapper > .adwords-wrapper{
		position:absolute;
		

		&:nth-child(2){
			top:10px;
			left:10px;
		}

		&:nth-child(3){
			top:20px;
			left:20px;
		}

		&:nth-child(4){
			top:30px;
			left:30px;
		}

		&:nth-child(5){
			top:40px;
			left:40px;
		}
		&:nth-child(6){
			top:50px;
			left:50px;
		}
}